<!-- 关联发票 -->
<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="800px"
    @close="reset"
    append-to-body
  >
    <!-- 发票信息展示 -->
    <div class="invoice-info">
      <table class="info-table">
        <tr>
          <td>发票种类</td>
          <td>
            <span>{{ dict.invoice_category[Number(invoiceCategory)] }}</span>
          </td>
          <td>发票类型</td>
          <td>
            <span>{{ dict.invoice_type[Number(invoiceType)] }}</span>
          </td>
        </tr>
        <tr>
          <td>发票抬头</td>
          <td>{{ invoiceTitle }}</td>
          <td>单位统一信用代码</td>
          <td>{{ creditCode }}</td>
        </tr>
        <tr>
          <td>联系人</td>
          <td>{{ contact }}</td>
          <td>联系人电话</td>
          <td>{{ phone }}</td>
        </tr>
        <tr>
          <td>开票时间</td>
          <td>{{ createTime }}</td>
          <td>开票金额</td>
          <td>{{ amount }}</td>
        </tr>
      </table>
    </div>

    <!-- 关联报名信息按钮 -->
    <div style="margin: 20px 0">
      <el-button type="primary" plain size="small" @click="openRelationDialog"
        >关联报名信息</el-button
      >
    </div>

    <!-- 报名信息表格 -->
    <div class="relation-table">
      <el-table
        :data="relationList"
        border
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column prop="studentName" label="姓名" align="center" />
        <el-table-column prop="idNumber" label="证件编号" align="center" />
        <el-table-column prop="projectSum" label="金额" align="center" />
      </el-table>
      <div class="total-row">
        <span>合计</span>
        <span>{{ totalAmount }}</span>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="confirm">关联</el-button>
    </div>
    <PreInvoiceRelationDialog
      ref="preInvoiceRelationDialog"
      title="预开票关联报名信息"
      :dict="dict"
      @confirm="handleConfirm"
    />
  </el-dialog>
</template>

<script>
import PreInvoiceRelationDialog from "@/components/PreInvoice/PreInvoiceRelationDialog.vue";

export default {
  name: "CorrelateInvoiceDialog",
  components: { PreInvoiceRelationDialog },
  props: {
    title: {
      type: String,
      default: "关联发票",
    },
    // 外部传入的发票数据
    invoiceData: {
      type: Object,
      default: () => ({}),
    },
    dict: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      visible: false,
      loading: false,
      relationList: [],
      totalAmount: 0,
      // 发票信息字段
      invoiceCategory: "",
      invoiceType: "",
      invoiceTitle: "",
      creditCode: "",
      contact: "",
      phone: "",
      createTime: "",
      amount: "",
    };
  },
  methods: {
    open() {
      this.visible = true;
      this.reset();
      // 初始化发票信息
      this.initInvoiceData();
      // 初始化已关联的报名信息
      this.initCorrelationData();
    },
    reset() {
      this.relationList = [];
      this.totalAmount = 0;
      this.loading = false;
    },
    initInvoiceData() {
      const data = this.invoiceData;
      this.invoiceCategory = data.preInvoiceCategory || "";
      this.invoiceType = data.preInvoiceType || "";
      this.invoiceTitle = data.preInvoiceTitle || "";
      this.creditCode = data.preCreditCode || "";
      this.contact = data.preContact || "";
      this.phone = data.prePhone || "";
      this.createTime = data.createTime;
      this.amount = data.preInvoiceAmount || "";
    },
    initCorrelationData() {
      // 从传入的 invoiceData 中获取已关联的数据
      if (this.invoiceData && this.invoiceData.correlationData) {
        this.relationList = this.invoiceData.correlationData;
        // 计算总金额
        this.totalAmount = this.relationList.reduce(
          (sum, row) => sum + parseFloat(row.projectSum || row.amount || 0),
          0
        );
      }
    },
    parseTime(time) {
      if (!time) return "";
      return new Date(time).toLocaleDateString();
    },
    openRelationDialog() {
      this.$refs.preInvoiceRelationDialog.open();
    },
    confirm() {
      if (this.relationList.length === 0) {
        this.$message.warning("请先选择要关联的报名信息");
        return;
      }

      // 模拟提交逻辑
      this.$emit("confirm", {
        invoiceId: this.invoiceData.preInvoiceId,
        relationList: this.relationList,
      });

      this.visible = false;
    },
    // 接收来自 PreInvoiceRelationDialog 的确认数据
    handleConfirm(selectedRows) {
      this.relationList = selectedRows;

      console.log("关联的报名信息：", selectedRows);

      this.totalAmount = selectedRows.reduce(
        (sum, row) => sum + parseFloat(row.amount || 0),
        0
      );
    },
  },
  mounted() {
    // 注册事件监听
    this.$on("confirm", this.handleConfirm);
  },
};
</script>

<style scoped>
.invoice-info {
  margin: 20px 0;
  padding: 15px;
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.info-table td {
  padding: 8px;
  border: 1px solid #dcdfe6;
  text-align: center;
}

.relation-table {
  margin-top: 20px;
}

.total-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-weight: bold;
  border-top: 1px solid #e4e7ed;
  margin-top: 10px;
}
</style>